import { useState } from "react";
import { Button, DatePicker, Form, Input, Select, TimePicker } from "antd";
import { getTenantId } from "@/utils/storage";
import { page as pageStaff } from '@/views/employee/staff/api';
import { buildArrangeModel } from "@/views/attendance/classInfo/data";

const TemporaryForm = ({ props = {} }) => {
    const [form] = Form.useForm();

    const { row, isOpenDialog, onSubmit, onCallback } = props;

    // 员工下拉多选
    const [staffOptions, setStaffOptions] = useState([]);
    const onSearchStaffHandler = (val) => {
        let query = {
            params: [
                { field: 'tenantId', value: getTenantId() },
                { field: 'name', expr: 'LIKE_LEFT', value: val },
            ]
        };
        pageStaff(query).then(resp => {
            let options = resp?.data?.records.map(item => ({
                label: item.name,
                value: item.id,
            }));
            setStaffOptions(options);
        });
    }

    const onSubmitHandler = () => {
        form.validateFields().then(model => {
            let params = {
                type: 'temporary',
                data: buildArrangeModel(model),
            };
            onSubmit(params, onSubmitCallback);
            onCancelHandler();
        });
    }

    const onSubmitCallback = (model) => {
        onCallback(model?.data?.workdays[0]);
    }

    const onCancelHandler = () => {
        form.resetFields();
        isOpenDialog();
    }

    form.setFieldsValue({ ...row });

    return (
        <div>
            <Form
                form={form}
                name="temporaryForm"
                labelCol={{ xs: 24, sm: 8, md: 6, lg: 4 }}
                labelAlign='right'
                style={{ padding: '0 12px' }}
            >
                <Form.Item label="id" name="id" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入名称' }]}>
                    <Input placeholder='请输入名称' />
                </Form.Item>
                <Form.Item label="颜色" name="color" >
                    <Input placeholder='请输入颜色' />
                </Form.Item>
                <Form.Item label="日期" name="workDate" rules={[{ required: true, message: '请选择日期' }]}>
                    <DatePicker.RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item label="时间" name="workTime" rules={[{ required: true, message: '请选择时间' }]}>
                    <TimePicker.RangePicker changeOnScroll needConfirm={false} format="HH:mm" style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item label="员工" name="staffIds" rules={[{ required: true, message: '请输入名称' }]}>
                    <Select
                        mode="multiple"
                        showSearch
                        allowClear
                        placeholder="请选择员工"
                        optionFilterProp="label"
                        filterOption={false}
                        onSearch={(val) => onSearchStaffHandler(val)}
                        options={staffOptions}
                    />
                </Form.Item>
            </Form >

            <div style={{ textAlign: 'right' }}>
                <Button style={{ marginRight: 16 }} onClick={onCancelHandler}>取消</Button>
                <Button type="primary" htmlType="submit" onClick={onSubmitHandler}>确认</Button>
            </div>
        </div>
    );
}

export default TemporaryForm;